<template>
  <div class="demand-card">
    <a-card :style="{ width: '360px' }" hoverable>
      <div class="content">
        <div class="content-left">
          <div class="content-left-title">
            <icon-settings />{{ cloneProps.name }}
          </div>
          <div class="content-left-sub-title">
            <icon-file />{{ cloneProps.explain }}
          </div>
        </div>
      </div>
      <div class="content-middle">
        <div class="content-middle-operater">
          <span class="status">状态</span>
          <a-switch
            v-model="cloneProps.state"
            :checked-value="1"
            :unchecked-value="2"
            @change="statusUpdate(cloneProps)"
          >
            <template #checked> 开 </template>
            <template #unchecked> 关 </template>
          </a-switch>
          <!--  :default-checked="status" -->
        </div>
      </div>
      <div class="operater">
        <span class="item" @click="edit(cloneProps)">编辑</span>
        <!-- <span class="item">复制</span> -->
        <a-popconfirm
          type="warning"
          content="确定删除吗?"
          @ok="delCard(cloneProps.id)"
        >
          <span class="item">删除</span>
        </a-popconfirm>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, computed } from 'vue';
import clonedeep from 'lodash.clonedeep';
import dayjs from 'dayjs';
import { TEditInternshipTemplate } from '@/apis/human/base/variationManager/type';

const props = withDefaults(
  defineProps<{
    form: TEditInternshipTemplate; // 传进来的参数
  }>(),
  {}
);

const cloneProps = computed(() => {
  return clonedeep(props.form);
});
const emits = defineEmits(['del', 'statusChange', 'edit']);

// 删除模板
const delCard = (id: number): void => {
  emits('del', id);
};
// 修改启用状态
const statusUpdate = (form: TEditInternshipTemplate) => {
  emits('statusChange', form);
};
const edit = (data: TEditInternshipTemplate) => {
  let params = { id: cloneProps.value.id };
  emits('edit', params);
};
defineExpose({ cloneProps });
</script>

<style lang="less" scoped>
.demand-card {
  margin: 16px;

  .content {
    padding-bottom: 16px;
    // border-bottom: 1px solid #eee;
    display: flex;

    &-left {
      flex: 1;

      &-title {
        font-size: 16px;
      }

      &-sub-title {
        font-size: 12px;
        color: #999;
        margin: 16px 0;
      }

      &-sub-title:hover {
        color: rgba(61, 126, 255, 1);
        cursor: pointer;
      }
    }

    &-right {
      font-size: 12px;
      color: #999;
      margin-left: 16px;

      &-creator {
      }

      &-time {
        margin: 16px 0;
      }
    }
  }

  .content-middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;

    .status {
      margin-right: 10px;
    }
  }

  .operater {
    margin-top: 16px;

    .item {
      margin: 0 10px;
      cursor: pointer;
    }
  }
}
</style>
